<template>
  <div class="role-container">
    <div>
      <!-- 按钮 -->
      <el-button size="small" type="danger" @click="addRole">
        添加角色
      </el-button>
    </div>
    <div class="rc-table">
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column align="center" prop="name" label="角色" width="180" />
        <el-table-column align="center" prop="state" label="启用" width="180">
          <template slot-scope="{ row }">
            {{ row.state == 1 ? '已启用' : '未启用' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="description" label="描述" />
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button type="text"> 分配权限 </el-button>
            <el-button type="text"> 编辑 </el-button>
            <el-popconfirm
              title="确定删除吗？"
              style="margin-left: 10px"
              @onConfirm="confirmDel(row.id)"
            >
              <el-button slot="reference" type="text"> 删除 </el-button>
            </el-popconfirm>
          </template>
          <!-- 具名插槽--自定义表头标签 -->
          <div slot="header">
            <el-tag type="danger"> 操作 </el-tag>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <div class="rc-pag">
      <!-- 分页 -->
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[3, 4, 6, 10]"
        :page-size="pageParams.pagesize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增弹出框 -->
    <el-dialog
      title="新增角色"
      :visible.sync="dialogVisible"
      width="30%"
      @close="close('ruleForm')"
    >
      <el-form
        ref="ruleFormRef"
        :rules="rules"
        :model="roleForm"
        label-width="80px"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleForm.name" />
        </el-form-item>
        <el-form-item label="启用">
          <el-switch
            v-model="roleForm.state"
            active-color="#4ebf8c"
            inactive-color="#ccc"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="roleForm.description" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="addLoading"
            type="primary"
            @click="submitForm('ruleForm')"
          >
            立即创建
          </el-button>
          <el-button @click="resetForm('ruleForm')"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getRolesRequest, addRolesRequest, delRolesRequest } from '@/api/role'
export default {
  name: 'RoleCom',
  data () {
    return {
      tableData: [],
      pageParams: {
        page: 1,
        pagesize: 3
      },
      total: 0,
      addLoading: false,
      dialogVisible: false,
      // 添加表单
      roleForm: {
        name: '',
        description: '',
        state: 0
      },
      value: true,
      //添加校验
      rules: {
        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '角色描述不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
  },
  created () {
    this.getRoles()
  },
  methods: {
    async getRoles () {
      const res = await getRolesRequest(this.pageParams)
      console.log(res)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pageParams.pagesize = val
      this.getRoles()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.pageParams.page = val
      this.getRoles()
    },
    //添加弹框
    addRole () {
      this.dialogVisible = true
    },
    //添加角色
    submitForm (formName) {
      this.$refs.ruleFormRef.validate(async (valid) => {
        this.addLoading = true
        if (valid) {
          await addRolesRequest(this.roleForm)
          this.addLoading = false
          this.resetForm()
          this.getRoles()

        } else {
          this.addLoading = false
        }
      });
    },
    resetForm (formName) {
      this.$refs.ruleFormRef.resetFields();
      this.dialogVisible = false
    },
    //关闭的三个状态都清空表单
    close (formName) {
      this.resetForm(formName)
    },
    //删除角色
    async confirmDel (id) {

      await delRolesRequest(id)
      this.getRoles()

    }
  }
}
</script>
<style lang='scss'  scoped>
.role-container {
  padding: 20px;
  .rc-table {
    margin: 20px 0;
  }
  .rc-pag {
    text-align: right;
  }
}
</style>
